<template>
  <section>
    <div
      class="desc"
      :class="[fold ? 'all' : 'fold']"
      v-html="booksVo.booksDescription"
      ref="desc"
      @click="isFold($event)"
    >
    {{booksVo.booksDescription}}
    </div>
    <div class="sort">
      <span v-for="sort in booksVo.sortVoList" :key="sort.id">{{sort.sortName}}</span>
    </div>
    <ul>
      <router-link tag="li" :to="'/books/reader/' + booksVo.id + '/' + chapterVo.id" class="chapter-item border-bottom d-flex justify-content-between align-items-center">
        <span>
          <i class="iconfont icon-zuixin"></i> 
          <span class="tag">最新</span>
          <span class="title">{{chapterVo.chapterName}}</span>
        </span>
        <i class="cubeic-arrow"></i>
      </router-link>
      <router-link tag="li" :to="'/books/chapter/' + booksVo.id"  class="chapter-item d-flex justify-content-between align-items-center">
        <span>
          <i class="iconfont icon-mulu"></i>
          <span class="tag">目录</span>
          <span class="title">共 {{chapterVo.chapterTotalCount}} 章</span>
        </span>
        <i class="cubeic-arrow"></i>
      </router-link>
    </ul>
  </section>
</template>

<script>
import {findTotalByBookId} from 'api/ChapterApi'

export default {
  name: "SectionDesc",
  props: {
    booksVo: Object
  },
  data() {
    return {
      fold: false,
      chapterVo: {}
    };
  },
  methods: {
    isFold($event) {
      this.fold = !this.fold
    },
    findTotalByBookId () {
      findTotalByBookId({
        bookId: this.booksVo.id
      }).then(res => {
        if(res.meta.success) {
          this.chapterVo = res.data
        }
      });
    }
  },
  created () {
    //通过bookId查询最新一章和章节小说
    // this.findTotalByBookId();
  },
  watch: {
    booksVo (newBooksVo) {
      this.booksVo = newBooksVo
      this.findTotalByBookId();
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

section {
  background: #FFF;
  overflow: hidden;
  padding: 10px;

  .desc {
    font-size: 14px;
    line-height: 20px;

    &.fold {
      _ellipsis(4);
    }

    &.all {
      _ellipsis(20);
    }
  }

  .sort {
    margin 10px 0;

    span {
      border: 1px solid #ccc;
      border-radius: 2px;
      padding: 2px 8px;
      margin-right 5px
      font-size 14px
    }
  }

  ul {
    .chapter-item {
      padding 13px 0
      font-size 16px
      line-height 16px
      span {
        margin-right 10px
        .iconfont {
          font-size 16px!important
          margin-right 10px
        }

        .title {
          color #666
          font-size 14px
          ellipsis()
        }
      }
    }
  }
}
</style>
